﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="EwcControlTest.Test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        .menu
        {
            float:left;
            clear:none;
            width:152px;
            border:solid 1px #BBBBBB;
        }
        .menuItem
        {
            float:left;
            clear:none;
            width:150px;
            border:solid 1px #DDDDDD;
            height:31px;
            font-size:18px;
            padding-top:9px;
            font-family:Arial;
            text-align:center;
        }
        .subMenu
        {
            float:left;
            clear:none;            
            width:160px;
            border:solid 1px #BBBBBB;
            background-color:#FAFAFA;
        }
        .subMenuItem
        {
            float:left;
            clear:none;
            width:150px;
            font-size:13px;
            padding:5p 0px 5px 5px;
            font-family:Arial;
            text-align:center;            
        }
    </style>
    <script type="text/javascript">
        function showMenu() {
            document.getElementById("menu1Sub").style.visibility = 'visible';
        }
        function hideMenu() {
            document.getElementById("menu1Sub").style.visibility = 'hidden';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="menu">
        <div style="float:left;clear:none;overflow:hidden" onclick="showMenu()" onmouseover="showMenu()" onmouseout="hideMenu()" id="menu1">
            <div class="menuItem">Menu 1</div>
            <div style="float:left;clear:both;font-size:0px;">
                <div id="menu1Sub" style="position:absolute;visibility:hidden;height:0px;font-size:0px;z-index:100;">
                    <div style="position:relative;overflow:hidden">
                        <div class="subMenu" >
                            <div class="subMenuItem" id="Menu1_1">Sub Menu 1</div>
                            <div class="subMenuItem" id="Menu1_2">Sub Menu 2</div>
                            <div class="subMenuItem" id="Menu1_3">Sub Menu 3</div>
                            <div class="subMenuItem" id="Menu1_4">Sub Menu 4</div>            
                        </div>
                    </div>
                </div>            
            </div>
        </div>  
        <div class="menuItem" id="menu2">Menu 2</div>
        <div class="menuItem" id="menu3">Menu 3</div>
        <div class="menuItem" id="menu4">Menu 4</div>        
    </div>
    </form>
</body>
</html>
